<!-- 后端模板：用户管理页面 -->
{% extends "base.html" %} <!-- 继承基础模板 -->

{% block content %}
    <h2 class="mb-4">用户管理</h2> <!-- 页面标题 -->

    <!-- 用户表单，用于创建新用户 -->
    <form id="userForm" class="mb-4">
        <div class="row g-3 align-items-center">
            <div class="col-md-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名" required> <!-- 用户名输入框 -->
            </div>
            <div class="col-md-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码" required> <!-- 密码输入框 -->
            </div>
            <div class="col-md-3">
                <label for="role" class="form-label">角色</label>
                <select class="form-select" id="role" required> <!-- 角色选择框 -->
                    <option value="">选择角色</option>
                    <option value="普通用户">普通用户</option>
                    <option value="管理员">管理员</option>
                </select>
            </div>
            <div class="col-md-3 align-self-end">
                <button type="submit" class="btn btn-success w-100">创建用户</button> <!-- 创建用户按钮 -->
            </div>
        </div>
    </form>

    <div id="message" class="mb-4"></div> <!-- 显示消息反馈的区域 -->

    <h3 class="mb-3">现有用户</h3> <!-- 现有用户的标题 -->

    <!-- 用户列表表格 -->
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>用户名</th>
                <th>角色</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="userTableBody">
            <!-- 用户将被列在此处 -->
        </tbody>
    </table>

    <!-- 编辑用户的模态框 -->
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="editUserForm"> <!-- 编辑用户的表单 -->
            <div class="modal-header">
              <h5 class="modal-title" id="editUserModalLabel">编辑用户</h5> <!-- 模态框标题 -->
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editUsername"> <!-- 隐藏的输入框以存储用户名 -->
                <div class="mb-3">
                    <label for="editPassword" class="form-label">新密码</label>
                    <input type="password" class="form-control" id="editPassword" placeholder="请输入新密码"> <!-- 新密码输入框 -->
                </div>
                <div class="mb-3">
                    <label for="editRole" class="form-label">角色</label>
                    <select class="form-select" id="editRole" required> <!-- 编辑角色选择框 -->
                        <option value="">选择角色</option>
                        <option value="普通用户">普通用户</option>
                        <option value="管理员">管理员</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <!-- 取消按钮 -->
              <button type="submit" class="btn btn-primary">保存更改</button> <!-- 保存更改按钮 -->
            </div>
          </form>
        </div>
      </div>
    </div>

    <script>
    // DOM 内容加载后执行的代码
    document.addEventListener('DOMContentLoaded', () => {
        const userRole = sessionStorage.getItem('userRole'); // 从 sessionStorage 获取用户角色
        if (userRole !== '管理员') { // 检查用户是否为管理员
            alert('您没有权限访问此页面！'); // 非管理员提示
            window.location.href = '/'; // 跳转到首页或其他页面
        }

        const userForm = document.getElementById('userForm'); // 获取用户创建表单
        const messageDiv = document.getElementById('message'); // 获取消息反馈区域
        const userTableBody = document.getElementById('userTableBody'); // 获取用户表格主体

        // 创建用户事件处理
        userForm.addEventListener('submit', async (e) => {
            e.preventDefault(); // 阻止默认表单提交
            const username = document.getElementById('username').value.trim(); // 获取用户名并去除空格
            const password = document.getElementById('password').value.trim(); // 获取密码并去除空格
            const role = document.getElementById('role').value; // 获取角色

            if (!username || !password || !role) { // 检查必填项是否为空
                messageDiv.innerHTML = `<div class="alert alert-warning">请填写所有必填字段。</div>`;
                return;
            }

            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    },
                    credentials: 'include', // 包含 Cookies
                    body: JSON.stringify({ username, password, role }) // 请求体
                });

                const data = await response.json(); // 解析 JSON 数据
                if (response.ok) { // 请求成功
                    messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                    userForm.reset(); // 重置表单
                    loadUsers(); // 重新加载用户列表
                } else {
                    messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 错误消息
                }
            } catch (error) {
                console.error('用户创建失败:', error);
                messageDiv.innerHTML = `<div class="alert alert-danger">用户创建失败，请重试。</div>`; // 捕获并处理错误
            }
        });

        // 加载用户列表
        const loadUsers = async () => {
            try {
                const response = await fetch('/api/auth/users', {
                    method: 'GET',
                    credentials: 'include' // 包含 Cookies
                });
                const data = await response.json(); // 解析返回数据
                if (response.ok) { // 请求成功
                    userTableBody.innerHTML = ''; // 清空用户表格
                    data.users.forEach(user => { // 遍历用户数据
                        const row = document.createElement('tr'); // 创建表格行
                        row.innerHTML = `
                            <td>${user.username}</td>
                            <td>${user.role}</td>
                            <td>${user.created_at || '未知'}</td> <!-- 显示用户创建时间 -->
                            <td>
                                <button class="btn btn-sm btn-primary me-2" onclick="editUser('${user.username}')">编辑</button> <!-- 编辑按钮 -->
                                <button class="btn btn-sm btn-danger" onclick="deleteUser('${user.username}')">删除</button> <!-- 删除按钮 -->
                            </td>
                        `;
                        userTableBody.appendChild(row); // 将新行添加到表格
                    });
                } else {
                    messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 错误消息
                }
            } catch (error) {
                console.error('加载用户失败:', error);
                messageDiv.innerHTML = `<div class="alert alert-danger">加载用户失败。</div>`; // 捕获并处理错误
            }
        };

        // 删除用户
        window.deleteUser = async (username) => {
            if (!confirm(`确定要删除用户 "${username}" 吗？`)) return; // 确认删除
            try {
                const response = await fetch(`/api/auth/users/delete/${username}`, {
                    method: 'DELETE',
                    credentials: 'include' // 包含 Cookies
                });
                const data = await response.json(); // 解析返回数据
                if (response.ok) { // 请求成功
                    messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                    loadUsers(); // 重新加载用户列表
                } else {
                    messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 错误消息
                }
            } catch (error) {
                console.error('删除用户失败:', error);
                messageDiv.innerHTML = `<div class="alert alert-danger">删除用户失败。</div>`; // 捕获并处理错误
            }
        };

        // 编辑用户
        window.editUser = (username) => {
            // 填充模态框中的当前用户信息
            document.getElementById('editUsername').value = username; // 设置用户名
            document.getElementById('editPassword').value = ''; // 重置密码输入
            document.getElementById('editRole').value = ''; // 重置角色选择

            // 显示模态框
            const editUserModal = new bootstrap.Modal(document.getElementById('editUserModal'));
            editUserModal.show(); // 弹出编辑模态框
        };

        // 保存编辑用户的处理
        const editUserForm = document.getElementById('editUserForm'); // 获取编辑用户的表单
        editUserForm.addEventListener('submit', async (e) => {
            e.preventDefault(); // 阻止默认表单提交
            const username = document.getElementById('editUsername').value; // 获取用户名
            const password = document.getElementById('editPassword').value.trim(); // 获取新密码
            const role = document.getElementById('editRole').value; // 获取新角色

            if (!role) { // 检查角色是否已选择
                messageDiv.innerHTML = `<div class="alert alert-warning">请选择角色。</div>`;
                return;
            }

            const payload = { role }; // 创建有效负载
            if (password) { // 如果密码不为空，添加到有效负载
                payload.password = password;
            }

            try {
                const response = await fetch(`/api/auth/users/update/${username}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    },
                    credentials: 'include', // 包含 Cookies
                    body: JSON.stringify(payload) // 请求体
                });

                const data = await response.json(); // 解析返回数据
                if (response.ok) { // 请求成功
                    messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                    editUserForm.reset(); // 重置编辑表单
                    const editUserModalInstance = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
                    editUserModalInstance.hide(); // 关闭模态框
                    loadUsers(); // 重新加载用户列表
                } else {
                    messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 错误消息
                }
            } catch (error) {
                console.error('更新用户失败:', error);
                messageDiv.innerHTML = `<div class="alert alert-danger">更新用户失败，请重试。</div>`; // 捕获并处理错误
            }
        });

        // 初始加载用户列表
        loadUsers();
    });
    </script>
{% endblock %}
